import React, { useEffect, useRef } from "react";
import useWinSize from './useWinSize'


const Child1 = (props) => {
  console.log(props)

  return (
    <div>
      CHILD !!!!!! 
      <button onClick={()=>props.callback()} >
        btn
      </button>
    </div>
  )
}

export default function UseRefExample() {
  const childRef = useRef(null)
 
  const winSize = useWinSize()

  const numRef = useRef(1)

  const btnClicked = () => {
    console.log(childRef.current)
    numRef.current++
    console.log(numRef.current)
  }

  useEffect(()=>{
    console.log('windows change',winSize)
    numRef.current++;
    console.log('update cnt',numRef)
  },[winSize])
  return (
    <div>
      helloworld
      <div ref={childRef}>
        world1
      </div>

      <div>
        refvalue := {numRef.current}
      </div>
      <Child1  callback={btnClicked} />
    </div>
  )
}